<template>
  <div class="app-container" :class="{ 'dark-mode': configStore.isDarkMode }">
    <el-container>
      <el-aside :width="configStore.sidebarCollapsed ? '64px' : '200px'">
        <div class="logo">
          <div v-if="!configStore.sidebarCollapsed" class="logo-text">
            TRADE
          </div>
          <div v-else class="logo-mini">T</div>
        </div>
        <el-menu
          :collapse="configStore.sidebarCollapsed"
          :default-active="activeMenu"
          router
          class="sidebar-menu"
          :collapse-transition="false"
        >
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><InfoFilled /></el-icon>
            <span>关于</span>
          </el-menu-item>
          <el-menu-item index="/products-list">
            <el-icon><ShoppingBag /></el-icon>
            <span>产品列表</span>
          </el-menu-item>
          <el-sub-menu index="/production">
            <template #title>
              <el-icon><Management /></el-icon>
              <span>生产模块</span>
            </template>
            <el-menu-item index="/production/schedule">
              <el-icon><Calendar /></el-icon>
              <span>生产进度管理</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-left">
            <el-button @click="configStore.toggleSidebar" text>
              <el-icon
                ><Fold v-if="!configStore.sidebarCollapsed" /><Expand v-else
              /></el-icon>
            </el-button>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="route.meta.title">{{
                route.meta.title
              }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <el-switch
              v-model="isDarkMode"
              inline-prompt
              active-text="🌙"
              inactive-text="☀️"
              @change="configStore.toggleTheme"
            />
            <el-dropdown>
              <span class="user-dropdown">
                {{ userStore.username }}
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item divided @click="userStore.logout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 在适当的位置添加或确认已有router-view -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@/store/user";
import { useConfigStore } from "@/store/config";
import {
  HomeFilled,
  InfoFilled,
  Goods,
  Fold,
  Expand,
  ArrowDown,
  ElementPlus,
  ShoppingBag,
  Management,
  Calendar,
} from "@element-plus/icons-vue";

const route = useRoute();
const userStore = useUserStore();
const configStore = useConfigStore();

const activeMenu = computed(() => route.path);
const isDarkMode = computed({
  get: () => configStore.isDarkMode,
  set: (val) => {},
});
</script>

<style scoped lang="scss">
.app-container {
  height: 100vh;

  &.dark-mode {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

.el-container {
  height: 100%;
}

.el-aside {
  transition: width 0.3s;
  background-color: var(--el-menu-bg-color);

  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;

    .logo-text {
      font-size: 20px;
      font-weight: bold;
      color: var(--el-color-primary);
    }

    .logo-mini {
      font-size: 18px;
      font-weight: bold;
      color: var(--el-color-primary);
    }
  }

  .sidebar-menu {
    border-right: none;
    height: calc(100% - 60px);
    overflow-y: hidden;
  }
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--el-border-color-light);

  .header-left {
    display: flex;
    align-items: center;

    .el-button {
      margin-right: 15px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 20px;

    .user-dropdown {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}

.el-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-secondary);
  border-top: 1px solid var(--el-border-color-light);
}
</style>
